<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>前端开发教程</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="description" content="Description">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" href="css/vue.css">
		<style type="text/css">
			body{
				--color: lightgrey;
				--w: 0.3em;
			}
			.sidebar-nav ul{
				margin-left: 0px;
				padding-left: var(--w);
				position: relative;
				line-height: 1.5;
			}
			.sidebar-nav ul::before{
				content: "";
				width: 1px;
				background-color: var(--color);
				position: absolute;
				margin: auto;
				top: 0.6em;
				bottom: 0.6em;
			}
			.sidebar-nav li ul::after{
				content: "";
				width: 1em;
				height: 1px;
				background-color: var(--color);
				position: absolute;
				left: -1em;
				top: 0.6em;
			}
			.sidebar-nav li{
				position: relative;
				padding-left: 1em;
				margin: 0;
				min-height: 1.5em;
			}
			.sidebar-nav li::before{
				content: "";
				width: 1em;
				height: 1px;
				background-color: var(--color);
				position: absolute;
				left: 0;
				top: 0.6em;
			}
			.sidebar-nav ul li a{
				display: inline-block;
				position: relative;
				text-decoration: none;
				color: var(--theme-color,#42b983);
				font-weight: 600;
			}
			/* 下划线效果 */
			.sidebar-nav ul li a::after{
				content: "";
				width: 0%;
				height: 1px;
				background-color: var(--theme-color,#42b983);
				position: absolute;
				left: 0;
				bottom: 2px;
			}
			.sidebar-nav ul li a:hover{
				text-decoration: none;
			}
			.sidebar-nav ul li.active a{
				border-right: none;
			}
			.sidebar-nav ul li.active a::after,
			.sidebar-nav ul li a:hover::after{
				width: 100%;
				transition: width 0.4s ease;
			}
			
			article a:hover {
				text-decoration: none;
				background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%2342b983' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
				background-size: 20px auto;
				animation: waveMove .5s infinite linear
			}
			article table{
				width: 100%;
			}
			
			@keyframes waveMove {
				from {
					background-position: 0 100%
				}
			
				to {
					background-position: 20px 100%
				}
			}
			.markdown-section pre{
				box-shadow: inset 0px 0px 4px rgba(0,0,0,0);
				transition: box-shadow .5s;
			}
			.markdown-section output:after, 
			.markdown-section pre:after{
			    color: rgba(0,0,0,.6);
				transition: color 1s;
			}
			.markdown-section pre:hover:after{
				color: rgba(0,0,0,1);
			}
			.markdown-section pre code{
				background: transparent;
			}
			.markdown-section pre:hover{
				cursor: pointer;
				box-shadow: inset 0px 0px 4px rgba(0,0,0,.6);
			}
			
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script>
			window.$docsify = {
				loadSidebar: true,
				subMaxLevel: 3,
				loadNavbar: true,
				homepage: '01.md'
			}
		</script>
		<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
		<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
	</body>
</html>
